<template>
  <i-modal
    :title="digType?'添加任务':'添加货物'"
    class="add_modal"
    :visible="realShow"
    :show-ok='showOk'
    :show-cancel='showOk'
  >
   <!-- @ok="confirm"
    show-cancel='false'

    formType="submit"
    confirmColor="#f83244"
    @cancel="handleClose1" -->
    <form class="bg_f" @submit='confirm' report-submit='true'>
      <div class="bg_f form_box">
        <div v-if="!digType">
          <div class="flex flex-between input_item">
            <label for>货物名称 :</label>
            <input v-model="formData.name" name="input" placeholder="请输入货物名称">
          </div>
          <div class="flex flex-between input_item">
            <label for>件数 :</label>
            <input
              v-model="formData.num"
              name="input"
              type="digit"
              @input="changeNum"
              placeholder="请输入件数"
            >
          </div>
          <div class="flex input_item">
            <label for>重量(KG) :</label>
            <input
              v-model="formData.weight"
              name="input"
              type="digit"
              @input="changeWeight"
              placeholder="请输入重量"
            >
          </div>
          <div class="flex input_item">
            <label for>体积(m³) :</label>
            <input
              v-model="formData.volume"
              name="input"
              type="digit"
              @input="changeVolume"
              placeholder="请输入体积"
            >
          </div>
           <div class="flex input_item">
            <label for>包装 :</label>
            <input
              v-model="formData.packages"
              name="input"
              placeholder="请输入包装"
            >
          </div>
        </div>
        <div v-if="digType">
          <div class="flex input_item">
            <label for>标题 :</label>
            <input v-model="takForm.title" maxlength="20" name="input" placeholder="请输入标题">
          </div>
          <!-- <div class="flex input_item">
            <label for>金额 :</label>
            <input
              v-model="takForm.amount"
              @input="changeAmount"
              name="input"
              type="number"
              placeholder="请输入金额"
            >
          </div> -->
          <div class="flex input_item">
            <label for>备注 :</label>
            <input v-model="takForm.remark" name="input" placeholder="请输入备注">
          </div>
          <!-- <div class="flex input_item">
            <label for>类型 :</label>
            <radio-group class="radio-group" @change="radioChange">
              <label class="radio" v-for="rl in radioList" :key="rl.type">
                <radio :value="rl.type"/>
                {{rl.name}}
              </label>
            </radio-group>
          </div> -->
        </div>
      </div>
      <div class="flex flex-between dig_btn">
        <button @click="handleClose1" size="small">取消</button>
        <button  formType="submit" size="small" type="primary">确定</button>
      </div>
    </form>
  </i-modal>
</template>
<script>
import store from "../store/index.js";
import checkApi from "@/utils/checkApi";
import { mapGetters } from "vuex";
export default {
  props: {
    digType: { type: String, default: "" }
  },
  data() {
    return {
      showOk:false,
      formData: {
        name: "",
        num: "",
        weight: "",
        volume:'',packages:'',
      },
      radioList: [{ name: "增加", type: 1 }, { name: "减少", type: 2 }],
      takForm: {
        // amount: 0,
        id: 0,
        orderId: 0,
        remark: "",
        // title: "",
        type: 1,
        status: 1,
        formId:'',
      }
    };
  },
  mounted() {},
  methods: {
    radioChange(e) {
      this.takForm.type = e.target.value;
    },
    checkAll(data) {
      let fd = data;
      let errMsg = "";
      var index = 0;
      Object.keys(fd).forEach(key => {
        if (!fd[key]) {
          if (this.digType) {
            if (key != "id"&&key!='formId') {
              index++;
              console.log("key", key);
            }
          } else {
            index++;
          }
        }
      });
      if (index > 0) {
        this.toastError("请填写必填项");
        return false;
      } else {
        return true;
      }
    },
    changeNum(e) {
      let value = e.target.value;
      this.formData.num = checkApi.exNum(value);
    },
    changeWeight(e) {
      let value = e.target.value;
      this.formData.weight = checkApi.price(value);
    },
    changeVolume(e) {
      let value = e.target.value;
      this.formData.volume = checkApi.price(value);
    },
    changeAmount(e) {
      let value = e.target.value;
      this.takForm.amount = checkApi.price(value);
    },
    confirm(e) {
      console.log('formType="submit"',e.target)
      this.visible1 = false;
      var data = { ...this.formData };
      if (this.digType) {
        data = { ...this.takForm };
        data.formId=e.target.formId
      } else {
        data = { ...this.formData };
      }

      if (this.digType) {
        data.orderId = this.$route.query.orderId;
      }
      if (!this.checkAll(data)) return;
      store.dispatch("setModal", false);
      this.$emit("checkGood", data);
    },
    handleClose1() {
      store.dispatch("setModal", false);
    }
  },
  computed: {
    realShow() {
      this.formData = {
        name: "",
        num: "",
        weight: "",
        volume:''
      };
      return store.getters.isShow;
    },
    ...mapGetters({
      isShow: "isShow",
      orderData: "orderData",
      defaultUser: "defaultUser"
    })
  },
  watch: {
    realShow() {
      this.visible1 = this.isSHow;
    }
  }
};
</script>

<style scoped>
form {
  width: 100%;
  font-size: 14px;
}
.form_box {
  padding:20px 20px 50px 20px;
}

.input_item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 5px 15px;
  text-align: left;
}

.input_item input {
  /* border: 1px solid #eee; */
  flex: 3;
  padding: 5px 0 5px 10px;
  margin-left: 10px;
}
.radio-group {
  flex: 3;
  padding: 5px 0 5px 10px;
  margin-left: 10px;
}

.input_item > label {
  width: 65px;
  position: relative;
  text-align: right;
}
.dig_btn button{
  font-size: 16px;
  padding: 5px 0;
  flex: 1;
  border-radius: 0;
}
.dig_btn{
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-top: 20px;
}
</style>
